import React,{Component} from 'react';
import Pages from '../Pages';
import { message ,Spin} from 'antd';
import {liveinfolist} from '../../config/fetch'
import * as pub from '../../config/public';
class ContentItem extends Component{
	constructor(props){
		super(props);

        this.state={
            showContent:'none'
        }
	}

    handleMouseOver(){
        this.setState({
            showContent:'block'
        })
    }
    handleMouseOut(){
        this.setState({
            showContent:'none'
        })
    }

	render(){
		const {data}=this.props;

		const title = data.liveTitle.split(',')[0];
		const link = data.liveTitle.split(':')[1];
		return(
			<li onMouseOver={this.handleMouseOver.bind(this)}   onMouseOut={this.handleMouseOut.bind(this)}>
				<img  src={pub.getFile(data.livePath)} alt="直播通道"/>
				{/*<img  src={data.livePath}/>*/}
				<h2>{title}</h2>
				<p className="time">起始时间：</p>
				<p>
					{pub.formatTimestamp(data.liveStartTime,'y-m-d h-m')}
					--
                    {pub.formatTimestamp(data.liveEndTime,'y-m-d h-m')}
					</p>
				<div className="link">活动链接:<a href={"https://"+link}>{}</a></div>
				<div style={{display:this.state.showContent}} className="cont">{data.liveInfoDesc}</div>
			</li>
		)
	}
}

class ChannelContent extends Component {
	constructor(props) {
		super(props);
		this.state={
		 	//articleList:this.props.articleList?this.props.articleList:getObject(10),
             channelContent:this.props.channelContent?this.props.channelContent:[],
             showContent:'none'
		}
	}
	componentWillUpdate(nextProps) {
        if (nextProps.channelContent !== this.props.channelContent) {
            this.setState({
                channelContent:nextProps.channelContent
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }

	render(){
		return(
                <ul>
                    {
                    	this.state.channelContent.map(
                    		(item,index)=>
                        		<ContentItem key={index} data={item}/>
                    	)
                    }
                 </ul>
			)
	}
}
class BroadChannel extends Component {
	constructor(args) {
		super();
		this.state={
			jumpPage: 1,
			channelContent:[],
			totalPage: 0,
			loading:true
	    }
	}

	componentDidMount() {
		this.show();
	}

	jump(page) {
		this.setState({
			jumpPage:page
		},()=>{
			this.show();
		})
	}
	show() {
		this.setState({
			loading: true
		})
		liveinfolist({
			pageno: this.state.jumpPage
		}).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					channelContent: data.liveInfoList,
					totalPage: data.total
				})
			} else {
				message.error(data.errMsg, 3);
			}
			this.setState({
				loading: false
			})
		}, (res) => {
			pub.reject();
			this.setState({
				loading: false
			})
		})
	}

	render(){
		return(
			 <div className="wrapper bg-F0F4F6">
			   <div className="layout clearFix">
			   <Spin spinning={this.state.loading} tip="加载列表中...">
                    <div className="live-box">
                       <ChannelContent  channelContent={this.state.channelContent}/>
                    </div>
                    </Spin>
				   <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
			    </div>
			</div>
			)
	}
}
export default BroadChannel;